<template>
  <view>
    <view class="headerClass">
      <view class="uni-padding-wrap uni-common-mt">
        <uni-segmented-control
          :current="current"
          :values="items"
          :style-type="styleType"
          :active-color="activeColor"
          @clickItem="onClickItem"
        />
      </view>
      <text class="positionClass" @click="xuanzhe">筛选</text>
    </view>

    <view v-if="current === 0">
      <view class="bigBox">
        <view class="text-center">
          <view class="huiseColor">限制量</view>
          <view>{{ LimitQuantity }}吨</view>
        </view>
        <view class="text-center">
          <view class="huiseColor">转运量</view>
          <view>{{ transtypeferred.toFixed(2) }}吨</view>
        </view>
        <view class="text-center">
          <view class="huiseColor">剩余量</view>
          <view>{{ (LimitQuantity - transtypeferred).toFixed(2) }}吨</view>
        </view>
      </view>
      <view
        class="overClass"
        v-if="!isLoading && typeLists.length"
        style="max-height: 75vh"
      >
        <view v-for="(item, index) in typeLists" :key="item.id">
          <view class="wrapBox">
            <view class="smallBox" style="padding-bottom: 0">
              <text> 序号:{{ index + 1 }} </text>
              <text
                style="color: rgb(0, 122, 255)"
                @click="typeOrDepit('type', item.name)"
              >
                类型:{{ item.name }}
              </text>
              <text> 转运量:{{ item.allWeight }} </text>
            </view>
          </view>
        </view>
      </view>
      <view class="loadingClass" v-show="isLoading">拼命加载中...</view>
      <view class="loadingClass" v-show="!isLoading && !typeLists.length"
        >暂无数据</view
      >
    </view>
    <view v-if="current === 1"
      ><text class="content-text">
        <view class="bigBox">
          <view class="text-center">
            <view class="huiseColor">限制量</view>
            <view>{{ LimitQuantity }}吨</view>
          </view>
          <view class="text-center">
            <view class="huiseColor">转运量</view>
            <view>{{ transdepferred.toFixed(2) }}吨</view>
          </view>
          <view class="text-center">
            <view class="huiseColor">剩余量</view>
            <view>{{ (LimitQuantity - transdepferred).toFixed(2) }}吨</view>
          </view>
        </view>
        <view>
          <view
            class="overClass"
            v-if="!isLoading && depLists.length"
            style="max-height: 75vh"
          >
            <view v-for="(item, index) in depLists" :key="item.id">
              <view class="wrapBox">
                <view class="smallBox" style="padding-bottom: 0">
                  <text> 序号:{{ index + 1 }} </text>
                  <text
                    style="color: rgb(0, 122, 255)"
                    @click="typeOrDepit('dep', item.name)"
                  >
                    部门:{{ item.name }}
                  </text>
                  <text> 转运量:{{ item.allWeight.toFixed(2) }} </text>
                </view>
              </view>
            </view>
          </view>
          <view class="loadingClass" v-show="isLoading">拼命加载中...</view>
          <view class="loadingClass" v-show="!isLoading && !depLists.length"
            >暂无数据</view
          >
        </view></text
      ></view
    >
  </view>
</template>

<script setup>
import { wfTypeFindPage, select_trans_by_date_status } from "./index";
import { useMemberStore } from "@/stores/modules/member";
const memberStore = useMemberStore();
const items = ref(["类型明细", "部门明细"]);
const current = ref(0);
const styleType = ref("button");
const activeColor = ref("#007aff");
const onClickItem = (e) => {
  if (current.value !== e.currentIndex) {
    current.value = e.currentIndex;
  }
};
const transtypeferred = ref(0);
const transdepferred = ref(0);
const LimitQuantity = ref(100);
const isLoading = ref(false);
onShow(() => {
  current.value = memberStore.currentNub;
  selectByDate();
});
const typeLists = ref([]);
const depLists = ref([]);
const selectByDate = async (date) => {
  typeLists.value = [];
  depLists.value = [];
  try {
    isLoading.value = true;
    const ress = await wfTypeFindPage();
    const res = await select_trans_by_date_status(date);
    memberStore.searchLists = res.data;
    const typeObj = res.data[1];
    const depObj = res.data[0];
    for (const key in depObj) {
      depObj[key].forEach((item) => {
        const lists = item.wfTransWeight ? JSON.parse(item.wfTransWeight) : [];
        item.wfTypeWeight = lists.reduce((pre, next) => {
          if (next.wfWeight) {
            pre += +next.wfWeight;
          }
          return pre;
        }, 0);
        if (item.wfType) {
          const wfTypeLists = item.wfType.split(",");
          const TypeNames = [];
          wfTypeLists.forEach((wfType) => {
            const obj1 = ress.data.find((item) => item.id == wfType);
            if (obj1) {
              TypeNames.push(obj1.wfTypeName);
            }
          });
          item.wfTypeName = TypeNames.join(",");
        }
      });
    }
    const type_Lists = Object.values(typeObj).flat(Infinity);
    const dep_Lists = Object.values(depObj).flat(Infinity);
    if (!date) {
      transtypeferred.value = type_Lists.reduce((pre, next) => {
        if (next.wfTypeWeight) {
          pre += +next.wfTypeWeight;
        }
        return pre;
      }, 0);
      transdepferred.value = dep_Lists.reduce((pre, next) => {
        if (next.wfTypeWeight) {
          pre += +next.wfTypeWeight;
        }
        return pre;
      }, 0);
    }
    for (const [key, value] of Object.entries(typeObj)) {
      const allWeight = value.reduce((pre, next) => {
        if (next.wfTypeWeight) {
          pre += +next.wfTypeWeight;
        }
        return pre;
      }, 0);
      typeLists.value.push({
        name: key,
        allWeight,
      });
      console.log(key, value, 333333);
    }
    for (const [key, value] of Object.entries(depObj)) {
      const allWeight = value.reduce((pre, next) => {
        if (next.wfTypeWeight) {
          pre += +next.wfTypeWeight;
        }
        return pre;
      }, 0);
      depLists.value.push({
        name: key,
        allWeight,
      });
      console.log(key, value, 333333);
    }
  } finally {
    isLoading.value = false;
  }
};
const xuanzhe = (e) => {
  dd.datePicker({
    format: "yyyy-MM",
    currentDate: "",
    success: async (res) => {
      const value = res.date.replaceAll("/", "-");
      selectByDate(value);
    },
    fail: async (err) => {
      selectByDate();
    },
  });
};
const typeOrDepit = (type, name) => {
  if (type == "type") {
    uni.navigateTo({
      url: `/pages/TypeDetails/TypeDetails?value=${name}`,
    });
  } else {
    uni.navigateTo({
      url: `/pages/deptDetails/deptDetails?value=${name}`,
    });
  }
};
</script>

<style lang="scss" scoped>
.uni-padding-wrap {
  width: 50%;
  // margin: 10rpx auto;
}
.positionClass {
  color: rgb(0, 122, 255);
  display: flex;
  align-items: center;
  margin-left: 100rpx;
}
.charts-box {
  width: 100%;
  margin-top: 30rpx;
  height: 300rpx;
}
.huiseColor {
  color: #ccc;
}
.bigBox {
  display: flex;
  justify-content: space-around;
  margin: 40rpx 0;
}
.headerClass {
  display: flex;
  justify-content: flex-end;
  padding-right: 34rpx;
  padding-top: 20rpx;
}
</style>
